<div>
    <table class="layui-hide" id="tblCustomer" lay-filter="tblCustomer"></table>
</div>
<script type="text/html" id="barCustomer">
    <a class="layui-btn " lay-event="add">新增加订单记录</a>
    <a class="layui-btn layui-btn-danger " lay-event="delete">删除订单记录</a>
    <div class="" style="float:right;width: 50%;">
	<input style="
			display: inline ; 
			height:38px; 
			width: 55%; 
			font-size: 14px;" type="text" id="txtCusName" placeholder="请输入客户名称">
    <a class="layui-btn " lay-event="search">按客户名称查询订单记录</a></div>
</script>
<script>
    var row = null
    var table
    layui.use(['table', 'jquery'], function() {
        table = layui.table;
        var $ = layui.jquery
        table.render({
            elem: '#tblCustomer',
            url: 'http://localhost:8080/orders/getOrdersList',
            cols: [
                [{
                    checkbox: true
                },
                    {
                        field: 'orNo',
                        width: 100,
                        title: '订单编号'
                    },
                    { field:"cusNo",
                    width: 100,
                    title: "客户编号"},
                    {
                        field: 'cusName',
                        width: 100,
                        title: '客户名称'
                    },

                    {
                        field: 'orProductname',
                        title: '购买商品名称',

                    },
                    {
                        field: 'orProductnumber',
                        title: "商品数量",
                        width: 150
                    },
                    {
                        field:"orProductprice",
                        title:"商品价格"
                    },
                    {
                        field:"orTotalprice",
                        title: "订单总金额"
                    },
                    {
                        field:"orDate",
                        title: "下单时间"
                    },
                    {
                        field:"orState",
                        title: "订单状态"
                    },]],
            page: true,
            height: 'full-160',
            limit: 10,
            limits: [5, 10, 15],
            toolbar: '#barCustomer',
            defaultToolbar: [] //默认工具栏不显示
        });
        table.on('toolbar(tblCustomer)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id); //获取选中行的数据
            switch(obj.event) { //obj.event对应工具栏按钮的lay-event属性
                case 'add':
                    layer.open({
                        type: 2,    //此处以iframe举例
                        title: '新增客户订单',
                        area: ['600px', '600px'], //窗口的区域，宽:400 高：450
                        shade: 0.3, //0-1的值  背景的透明度  0是完全透明 1是全黑
                        maxmin: true,//最大最小化的按钮
                        offset: [ //为了演示，随机坐标
                            ($(window).height() - 600) / 2,
                            ($(window).width() - 600) / 2
                        ], //窗口的坐标位置 居中显示
                        content: 'customer/customeraddorder.html', //窗口显示的页面
                    });
                    break;
                case 'delete':
                    if(checkStatus.data.length <= 0) {
                        layer.msg('请选择一行进行删除');
                    } else {
                        layer.confirm('确定删除吗', function(index) {
                            var arrId = [] //数组
                            for(var i = 0; i < checkStatus.data.length; i++) {
                                var customer = checkStatus.data[i]
                                arrId.push(customer.orNo)
                                debugger

                            }
                            $.ajax({
                                type: "POST",
                                url: "http://localhost:8080/orders/delorder",
                                dataType: 'JSON',
                                data: {
                                    ids: arrId.join(',')
                                }, //传数组到后台
                                success: function(obj) {
                                    table.reload('tblCustomer',{
                                        page:{
                                            curr:1//删除之后跳转到第一页，避免最后一页全部删除之后出现空白
                                        }
                                    }) //刷新表格
                                    layer.msg(obj.msg)
                                }
                            });
                            layer.close(index)
                        });
                    }
                    break;
                case 'search':
                    var key = $("#txtCusName").val()
                    table.reload('tblCustomer', {
                        where: {
                            cusName: key //查询条件
                        },
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    })
                    break;

            }
        });

    });
</script>